<!doctype html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<body>
	<section class="content-header">
		<h1>
			广告 <small>广告列表</small>
		</h1>
		<ol class="breadcrumb">
			<li><a href="javascript:;"><i class="fa fa-newspaper-o"></i> 内容管理</a></li>
			<li class="active">广告列表</li>
		</ol>
	</section>

	<section class="content">

		<div class="mailbox-controls">
			<div class="btn-group btn-group-sm">
				<a class="btn btn-primary" href="#/page/content/ad/add"> <i class="fa fa-plus"></i> 添加
				</a>
				<button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-primary dropdown-toggle"
					type="button">
					批量 <span class="fa fa-caret-down"></span>
				</button>
				<ul class="dropdown-menu">
					<li><a href="javascript:;" id="delete-button"> <i class="glyphicon glyphicon-remove"></i> 删除
					</a></li>
				</ul>
			</div>
			<div class="btn-group btn-group-sm">
				<button id="open-search-button" type="button" class="btn btn-primary">
					<i class="fa fa-search"></i>
				</button>
				<button type="button" class="btn btn-warning" id="refresh-button">
					<i class="fa fa-refresh"></i>
				</button>
			</div>
		</div>

		<div class="box box-success" id="search-panel">
			<form id="search-form" class="form-search form-inline">
				<div class="box-body">
					<div class="form-group">
						<label for="search-title" class="control-label">标题</label> <input class="form-control" id="search-title"
							placeholder="请输入标题" name="title" type="text">
					</div>
					<button type="submit" class="btn btn-primary btn-sm" id="search-button">
						<i class="fa fa-search"></i> 搜索
					</button>
				</div>
			</form>
		</div>

		<div class="box box-primary">
			<div class="box-body no-padding">
				<table id="grid-main" class="table table-hover">
					<thead>
						<tr>
							<th data-column-id="id" data-type="numeric" data-identifier="true" data-visible="false">ID</th>
							<th data-column-id="title">标题</th>
							<th data-formatter="adPositionName">广告位</th>
							<th data-column-id="type" th:column-enum="com.sample.business.content.entity.AdEntity$Type">类型</th>
							<th data-column-id="beginDate" data-converter="datetime">起始日期</th>
							<th data-column-id="endDate" data-converter="datetime">结束日期</th>
							<th data-column-id="sortNo">排序</th>
							<th data-formatter="commands" data-css-class="command-column" data-width="120px" data-sortable="false"
								data-align="center" data-header-align="center">操作</th>
						</tr>
					</thead>
				</table>
			</div>
		</div>

	</section>


	<script type="text/javascript">
		requirejs(
				[ "domReady", "bootgrid" ],
				function(ready) {
					ready(function() {
						activeMenu("content_ad");

						var deleteRow = function(grid, ids) {
							$.confirm({
								title : "确认信息",
								content : "确定要删除吗？",
								buttons : {
									confirm : {
										text : "确定",
										action : function() {
											$.post(base + "/content/ad/delete", {
												ids : ids
											}, function(resp) {
												if (resp.success) {
													$.alert({
														title : "提示",
														content : "操作成功",
														buttons : {
															ok : {
																text : "确定"
															}
														}
													});
													grid.bootgrid("reload")
												} else {
													$.alert({
														title : "提示",
														content : resp.msg,
														buttons : {
															ok : {
																text : "确定"
															}
														}
													});
												}
											}, "json");
										}
									},
									cancel : {
										text : "取消"
									}
								}
							});
						};

						var gridMain = $("#grid-main")
								.bootgrid(
										{
											url : base + "/content/ad/page",
											post : function() {
												var keyValues = $("#search-form").serialize();
												return parseQueryString(keyValues);
											},
											formatters : {
												"adPositionName": function(column, row) {
													return row.adPosition.name;
												},
												"commands" : function(column, row) {
													return "\
			<div class=\"btn-group btn-group-sm\" data-row-id=\""+row.id+"\">\
				<a class=\"btn btn-primary\" href=\"#/page/content/ad/edit/"+row.id+"\">\
					<i class=\"glyphicon glyphicon-edit\"></i>\
				</a>\
				<a aria-expanded=\"false\" aria-haspopup=\"true\" data-toggle=\"dropdown\" \
					class=\"btn btn-primary dropdown-toggle\" type=\"button\">\
					<i class=\"fa fa-cog\"></i>\
					<span class=\"ion-arrow-down-b\"></span>\
				</a>\
				<ul class=\"dropdown-menu pull-right\">\
					<li><a href=\"javascript:;\" class=\"command-delete\"><i class=\"glyphicon glyphicon-remove\"></i> 移除</a></li>\
				</ul>\
			</div>";
												}
											}
										});

						gridMain.on("loaded.rs.jquery.bootgrid", function() {
							var $table = $(this);
							$table.find(".dropdown-toggle").dropdown();

							$table.find(".command-delete").on("click", function(e) {
								var entity_id = $(this).closest(".btn-group").data("row-id");
								deleteRow($table, [ entity_id ]);
							});
						});

						var actionWithSelectedRows = function(action) {
							var selectedRows = gridMain.bootgrid("getSelectedRows");
							if (selectedRows && selectedRows.length > 0) {
								action(gridMain, selectedRows);
							} else {
								$.alert({
									title : "提示",
									content : "请至少选择一个广告",
									buttons : {
										ok : {
											text : "确定"
										}
									}
								});
							}
						}
						$("#delete-button").on("click", function() {
							actionWithSelectedRows(function(grid, selectedRows) {
								deleteRow(grid, selectedRows);
							});
						});

						var refreshGrid = function() {
							gridMain.bootgrid("reload");
						}

						$("#search-button").on("click", function() {
							refreshGrid();
							return false;
						});
						$("#refresh-button").on("click", function() {
							refreshGrid();
						});

						$("#open-search-button").on("click", function() {
							$("#search-panel").toggle('fast')
						});
					});
				});
	</script>
</body>
</html>

